<template>
  <div>
    <anovPart
      v-for="(item, idx) in anovParts"
      :part="item"
      :key="idx"
      :anovFile="anovFile"
    ></anovPart>
  </div>
</template>
<script>
import anovPart from './anovPart'
import { partServer, pageServer, animateServer } from 'anov-core'
import { mapState } from 'vuex'
import { util } from 'dtc'
export default {
  name: 'anovPage',
  computed: {
    anovParts() {
      let currentPath = this.$route.path
      let page = pageServer.getPageByPath(currentPath)
      return page.parts
    }
  },
  data() {
    return {}
  },
  props: {
    anovFile: {
      type: String,
      required: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    //页面进场
    enter(e) {
      e && e.next()
      this.$nextTick(() => {
        let path = this.$route.path
        let tlConfig = pageServer.getPageByPath(path).tlConfig
        let option = util.cloneDeep({ tlConfig, path })
        let tlEnter =
          animateServer.getCurrentRouteTl('enter') ||
          animateServer.createTl(option)
        let anovParts = partServer.getCompByTagName('anovPart')
        let labelsArray = tlEnter.getLabelsArray()
        anovParts &&
          anovParts.forEach((part, i) => {
            let label = labelsArray.find(label => label.name === part.$el.id)
            let time = (label && label.time) || (5 * i) / 10
            try {
              let tl
              tlEnter.add((tl = part.init()), time).timeScale(1)
              if (!(tl instanceof TimelineLite || tl instanceof TweenLite)) {
                app.log(
                  `${part.$el.id} the init method did not return a tiemline or tween`
                )
              }
            } catch (error) {
              app.log(
                `${part.$el.id} the init method did not return a tiemline or tween`
              )
            }
          })
        if (animateServer.animateDebug) {
          animateServer.killDevTool()
          animateServer.createDevTool()
        }
        app.log('pageEnter')
      })
    },
    // 页面退场
    leave(e) {
      if (!e) return
      let tl = app.animateServer.getCurrentRouteTl('enter')
      if (!tl) return
      let timeScale = app.pageServer.getPageByPath(e.from.path).reverseTimeScale
      tl.eventCallback('onReverseComplete', () => {
        tl.reversed(false).clear(false)
        TweenMax && TweenMax.killAll()
        e.next()
      })
      tl.timeScale(timeScale).reverse()
      app.log('pageLeave')
    }
  },
  components: { anovPart }
}
</script>
<style lang="scss" scoped></style>
